<template>
	<!-- 评价内容 -->
	<view>
		<view class="review-header">
			<view class="review-tabs">
				<view class="review-tab-item" :class="{ active: reviewFilter == 'all' }"
					@click="setReviewFilter('all')">
					全部 <text class="tab-count">{{ reviewCount.all }}</text>
				</view>
				<view class="review-tab-item" :class="{ active: reviewFilter == 'image' }"
					@click="setReviewFilter('image')">
					图/视频 <text class="tab-count">{{ reviewCount.image }}</text>
				</view>
				<view class="review-tab-item" :class="{ active: reviewFilter == 'good' }"
					@click="setReviewFilter('good')">
					好评 <text class="tab-count">{{ reviewCount.good }}</text>
				</view>
				<view class="review-tab-item" :class="{ active: reviewFilter == 'bad' }"
					@click="setReviewFilter('bad')">
					差评 <text class="tab-count">{{ reviewCount.bad }}</text>
				</view>
			</view>
		</view>

		<view class="reviews-list">
			<block v-for="(review, index) in filteredReviews" :key="index">
				<view class="review-item">
					<view class="review-header-info">
						<view class="review-avatar">
							<image :src="review.ext1" mode="aspectFill"></image>
						</view>
						<view class="review-user-info">
							<view class="review-nickname">{{ review.nickName }}</view>
							<view class="review-rating">
								<u-rate :value="review.commentType" readonly size="20" activeColor="#ffaa00"></u-rate>
								<text class="rating-text">{{ review.commentType }}分</text>
							</view>
						</view>
						<view class="review-date">{{ review.createTime }}</view>
					</view>

					<view class="review-content">
						{{ review.content?review.content:'该用户没有填写内容！' }}
					</view>
					<view class="review-images"
						v-if="review.clientGuideCommentFileList && review.clientGuideCommentFileList.length > 0">
						<view class="review-image-container">
							<view class="image-grid">
								<block v-for="(image, imgIndex) in review.clientGuideCommentFileList.slice(0, 3)"
									:key="imgIndex">
									<view class="image-item"
										@click="previewImage(review.clientGuideCommentFileList, imgIndex)">
										<image :src="image.fileUrl" mode="aspectFill" class="review-image"></image>
										<!-- 超过3张时在第三张图片上显示蒙层和总数 -->
										<view v-if="review.clientGuideCommentFileList.length > 3 && imgIndex === 2"
											class="image-overlay">
											<view class="image-count">+{{ review.clientGuideCommentFileList.length }}
											</view>
										</view>
									</view>
								</block>
							</view>
						</view>
					</view>

					<view class="review-actions">
						<view class="action-icons">
							<view class="icon-item" @click="handleLikePost">
								<view class="icon-item-top">
									<image
										:src="review.isLiked ?'/static/index/detail/good-active.png' :'/static/index/detail/good.png'"
										mode=""></image>
								</view>
								<view class="icon-item-bottom">{{ review.likeCount | formatLikes }}</view>
							</view>

							<!-- <view class="icon-item" @click="handleUnGood">
								<view class="icon-item-top">
									<image
										:src="review.isStep ?'/static/index/detail/unGood-active.png' :'/static/index/detail/unGood.png'"
										mode=""></image>
								</view>
								<view class="icon-item-bottom">{{ review.stepCount | formatLikes }}</view>
							</view>

							<view class="icon-item" @click="handleCollectPost">
								<view class="icon-item-top">
									<image
										:src="review.isCollected ?'/static/index/detail/star-active.png' :'/static/index/detail/star.png'"
										mode=""></image>
								</view>
								<view class="icon-item-bottom">{{ review.collectCount | formatLikes }}</view>
							</view>

							<view class="icon-item">
								<view class="icon-item-top">
									<image src="/static/index/detail/share.png" mode=""></image>
								</view>
								<view class="icon-item-bottom">{{ review.repostCount | formatLikes }}</view>
							</view> -->
						</view>
					</view>
				</view>
			</block>
		</view>

		<u-loadmore :status="reviewLoadStatus" @loadmore="loadMoreReviews" />
	</view>
</template>

<script>
	import {
		getPostDetails,
		getClientFollow,
		getCommentList,
		addComment,
		postClientLike,
		postCancelLike,
		postClientCollect,
		postCancelCollect,
		addCommentLike,
		cancelCommentLike,
		clientStep,
		deleteClientStep,
		guideCommentList,
		getListNumber
	} from '@/request/api.js';
	export default {
		filters: {
			formatLikes(val) {
				if (typeof val !== 'number') return val;
				if (val >= 10000) return (val / 10000).toFixed(1) + 'w';
				if (val >= 1000) return (val / 1000).toFixed(1) + 'k';
				return val;
			}
		},
		props: {
			guideUserId: {
				type: [String, Number],
				default: null
			}
		},
		watch: {
			guideUserId: {
				handler(newVal) {
					if (newVal) {
						this.resetData();
						this.loadData(newVal);
					}
				},
				immediate: true
			}
		},
		data() {
			return {
				reviewFilter: 'all', // 默认筛选条件
				reviewCount: {
					all: 0,
					image: 0,
					good: 0,
					bad: 0
				},
				// 存储所有评价数据
				allReviews: [],
				imageReviews: [],
				goodReviews: [],
				badReviews: [],
				// 当前显示的评论列表
				filteredReviews: [],
				reviewLoadStatus: 'loadmore',

				// 分页参数
				pageNum: 1,
				pageSize: 10,
				total: 0,
				hasMore: true,

				// 标记是否已加载头部数量
				hasLoadedCount: false
			};
		},
		methods: {
			// 重置数据
			resetData() {
				this.pageNum = 1;
				this.total = 0;
				this.hasMore = true;
				this.allReviews = [];
				this.imageReviews = [];
				this.goodReviews = [];
				this.badReviews = [];
				this.filteredReviews = [];
				this.reviewLoadStatus = 'loadmore';
				this.hasLoadedCount = false;
			},

			loadData(userId, loadMore = false) {
				// 如果不是加载更多，重置分页参数
				if (!loadMore) {
					this.pageNum = 1;
					this.hasMore = true;
					this.reviewLoadStatus = 'loadmore';
				}

				this.loadReviewCount(userId);
			},

			// 加载评价数量统计
			loadReviewCount(userId) {
				let params = {
					guideId: userId,
				}
				getListNumber(params).then(res => {
					if (res.data.code == 200) {
						// 设置数量统计
						this.reviewCount.image = res.data.imgOrVideoList.length
						this.reviewCount.good = res.data.goodNumberList.length
						this.reviewCount.bad = res.data.badNumberList.length
						this.reviewCount.all = res.data.commentList.length
						
						// 存储各个分类的评价数据
						this.allReviews = res.data.commentList || [];
						this.imageReviews = res.data.imgOrVideoList || [];
						this.goodReviews = res.data.goodNumberList || [];
						this.badReviews = res.data.badNumberList || [];
						
						// 根据当前筛选条件显示对应的数据
						this.filterReviews();
						
						// 设置加载状态
						this.hasLoadedCount = true;
						this.reviewLoadStatus = this.filteredReviews.length > 0 ? 'loadmore' : 'nomore';
					}
				}).catch(err => {
					console.error('加载评价数量失败:', err);
				})
			},

			// 根据筛选条件显示对应的评价数据
			filterReviews() {
				switch (this.reviewFilter) {
					case 'all':
						this.filteredReviews = this.allReviews;
						break;
					case 'image':
						this.filteredReviews = this.imageReviews;
						break;
					case 'good':
						this.filteredReviews = this.goodReviews;
						break;
					case 'bad':
						this.filteredReviews = this.badReviews;
						break;
					default:
						this.filteredReviews = this.allReviews;
				}
				
				// 更新加载状态
				this.hasMore = false; // 由于是一次性加载所有数据，所以没有更多数据
				this.reviewLoadStatus = this.filteredReviews.length > 0 ? 'nomore' : 'nomore';
			},

			previewImage(images, currentIndex) {
				// 提取文件URL数组用于预览
				const imageUrls = images.map(item => item.fileUrl);
				uni.previewImage({
					current: currentIndex,
					urls: imageUrls
				});
			},

			handleLikePost() {
				return
				const isLiked = this.review.isLiked;
				const api = isLiked ? postCancelLike : postClientLike;

				// UI即时反馈
				this.review.isLiked = !isLiked;
				this.review.likeCount += isLiked ? -1 : 1;

				api({
					postId: this.review.id,
					userId: this.$store.state.userInfo.userId
				}).catch(() => {
					// 失败时回滚
					this.review.isLiked = isLiked;
					this.review.likeCount += isLiked ? 1 : -1;
				});
			},
			
			handleUnGood() {
				return
				const isStep = this.review.isStep;
				const api = !isStep ? clientStep : deleteClientStep;

				// UI即时反馈
				this.review.isStep = !isStep;
				this.review.stepCount += isStep ? -1 : 1;

				api({
					postId: this.review.id,
					userId: this.$store.state.userInfo.userId
				}).catch(() => {
					// 失败时回滚
					this.review.isStep = isStep;
					this.review.likeCount += isStep ? 1 : -1;
				});
			},
			
			// 设置评价筛选条件
			setReviewFilter(filter) {
				this.reviewFilter = filter;
				this.filterReviews();
			},

			// 点赞评价
			handleLike(review) {
				if (review.isLiked) return;

				review.isLiked = true;
				review.likeCount++;
				review.isDisliked = false;
				review.dislikeCount = 0;

				// 这里可以添加实际的API调用
				this.updateReviewLike(review.id, true);
			},

			// 取消点赞
			handleDislike(review) {
				if (review.isDisliked) return;

				review.isDisliked = true;
				review.dislikeCount++;
				review.isLiked = false;
				review.likeCount = 0;

				// 这里可以添加实际的API调用
				this.updateReviewLike(review.id, false);
			},

			// 分享评价
			handleShare(review) {
				uni.showToast({
					title: '分享成功',
					icon: 'success'
				});
			},

			// 评论评价
			handleComment(review) {
				uni.navigateTo({
					url: `/pages_sub/comment/comment?reviewId=${review.id}`
				});
			},

			// 更新评价点赞状态（模拟API）
			updateReviewLike(reviewId, isLike) {
				// 这里可以添加实际的API调用
				console.log(`更新评价${reviewId}的点赞状态：${isLike ? '点赞' : '取消点赞'}`);
			},

			// 加载更多评价
			loadMoreReviews() {
				// 由于是一次性加载所有数据，所以不需要分页加载
				// 这个方法可以保留但不需要实现具体逻辑
				return;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tab-content {
		.review-header {
			padding: 0 20rpx;
			background-color: #fff;

			.review-tabs {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				padding: 20rpx 0;
				background-color: #fff;

				.review-tab-item {
					font-size: 24rpx;
					color: rgba(41, 41, 48, 1);
					padding: 10rpx;
					margin-bottom: 10rpx;
					position: relative;
					flex: none;
					text-align: center;
					background-color: rgba(241, 240, 240, 1);
					margin-right: 20rpx;
					border-radius: 10rpx;

					&.active {
						color: rgba(254, 113, 49, 1);
						font-weight: bold;
						background-color: rgba(255, 233, 223, 1);
					}

					.tab-count {
						font-size: 20rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.reviews-list {
			.review-item {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

				.review-header-info {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.review-avatar {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						overflow: hidden;
						flex-shrink: 0;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.review-user-info {
						flex: 1;
						margin-left: 20rpx;
						min-width: 0;

						.review-nickname {
							font-size: 28rpx;
							color: #000;
							font-weight: bold;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.review-rating {
							display: flex;
							align-items: center;
							margin-top: 8rpx;

							.rating-text {
								font-size: 24rpx;
								color: #999;
								margin-left: 10rpx;
							}
						}
					}

					.review-date {
						font-size: 24rpx;
						color: #999;
						margin-left: 20rpx;
					}
				}

				.review-content {
					font-size: 28rpx;
					color: #333;
					line-height: 1.6;
					margin-bottom: 20rpx;
					word-break: break-word;
				}

				.review-images {
					margin-bottom: 20rpx;

					.review-image-container {
						.image-grid {
							display: flex;
							flex-wrap: wrap;
							gap: 20rpx;
							width: 100%;

							.image-item {
								position: relative;
								width: calc((100% - 40rpx) / 3);
								/* 3列布局，减去间隙 */
								height: 180rpx;
								border-radius: 10rpx;
								overflow: hidden;

								.review-image {
									width: 100%;
									height: 100%;
									display: block;
								}

								// 图片蒙层
								.image-overlay {
									position: absolute;
									top: 0;
									left: 0;
									right: 0;
									bottom: 0;
									background-color: rgba(0, 0, 0, 0.4);
									display: flex;
									align-items: center;
									justify-content: center;

									.image-count {
										color: #fff;
										font-size: 32rpx;
										font-weight: bold;
									}
								}
							}
						}
					}
				}

				.review-actions {
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.action-icons {
						display: flex;
						align-items: center;
						margin-left: 24rpx;

						.icon-item {
							display: flex;
							align-items: center;
							margin-left: 32rpx;

							&:first-child {
								margin-left: 0;
							}

							.icon-item-top {
								width: 48rpx;
								height: 48rpx;
								margin-bottom: 8rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.icon-item-bottom {
								font-size: 20rpx;
								color: #999;
							}
						}
					}
				}
			}
		}
	}
</style>